<template>
    <Table :goodsList="goodsList">
        <template v-slot:head="">
            <!-- <th>#</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>标签</th>
            <th>操作</th> -->
            <th v-for="(item, index) in titleList" :key="index">
                {{ item }}
            </th>
        </template>
        <template #body="{ row, ind }">
            <!-- 替换所有的td -->
            <td>{{ row.id }}</td>
            <td>{{ row.goods_name }}</td>
            <td>￥{{ row.goods_price }}</td>
            <td>
                <input type="text" v-focus
                    class="form-control form-control-sm ipt-tag" 
                    v-if="row.inputVisible"
                    v-model="row.inputValue"
                    @keyup.esc="row.inputValue = ''"
                    @keyup.enter="addTag(ind)"/>
                <button class="btn btn-outline-primary rounded-pill"
                    v-else  @click="row.inputVisible = true">
                    +Tag
                </button>
                <span class="btn btn-outline-dark"
                v-for="(item, index) in row.tags" :key="index">
                    {{ item }}
                </span>
            </td>
            <td style="text-align: center;">
                <button type="button" 
                class="btn btn-outline-danger btn-sm"
                @click="goodsList.splice(ind, 1)">
                    删除
                </button>
            </td>
        </template>
    </Table>
</template>
<script setup>
import Table from './components/Table.vue'
import { ref } from 'vue'
const titleList = ['#', '商品名称', '价格', '标签', '操作']
const goodsList = ref([
    {
        id: 1,
        goods_name: '夏季专柜同款女鞋',
        goods_price: 298,
        tags: ['舒适', '透气'],
        inputVisible: false,
        inputValue: ''
    },
    {
        id: 2,
        goods_name: '冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋',
        goods_price: 89,
        tags: ['保暖', '防滑'],
        inputVisible: false,
        inputValue: ''
    },
    {
        id: 3,
        goods_name: '秋冬新款女士毛衣 套头宽松针织衫 简约上衣',
        goods_price: 199,
        tags: ['秋冬', '毛衣'],
        inputVisible: false,
        inputValue: ''
    },
    {
        id: 4,
        goods_name: '2023 春秋装新款大码女装 衬衫 上衣',
        goods_price: 19,
        tags: ['雪纺衫', '打底'],
        inputVisible: false,
        inputValue: ''
    },
    {
        id: 5,
        goods_name: '长款长袖圆领女士毛衣 2022 秋装新款假两件连衣裙',
        goods_price: 178,
        tags: ['圆领', '连衣裙'],
        inputVisible: false,
        inputValue: ''
    }
])
// 定义自定义指令：v-focus
const vFocus = el => {
    // 触发获取焦点事件
    el.focus()
}

const addTag = (index) => {
    // 找到目标行的inputValue，添加到目标行的tags数组里面
    let obj = goodsList.value[index] // 确定目标行的对象
    console.log(obj.inputValue)
    console.log(obj.tags)
    obj.tags.push(obj.inputValue)
    // 清空内容
    obj.inputValue = ''
    // 关闭输入框
    obj.inputVisible = false
}
</script>
<style scoped>
th {
    text-align: center;
}

td {
    vertical-align: middle;
}

.ipt-tag {
    width: 80px;
    display: inline;
}
</style>